<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="imagetoolbar" content="no"> <!--ie image gizmo OFF!-->
    <style type="text/css">
        #map {
            width: 512px;
            height: 512px;
            border: 1px solid black;
        }
    </style>
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        <!--
        var map, layer, popup;
        var markers, feature, marker;
        
        function init(){
            map = new OpenLayers.Map('map');
            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
                "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
            map.addLayer(layer);

            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.zoomToFullExtent();
        }
        
        function changer() {
            popup.setBackgroundColor("red");
            popup.setSize(new OpenLayers.Size(100,600));
//            popup.moveTo(new OpenLayers.Pixel(120,120));
//            popup.setOpacity(.5);
            popup.setBorder("2px solid");    
            popup.setContentHTML("High Chickens");            
        }

        function add() {
            popup = new OpenLayers.Popup("chicken", 
                                         new OpenLayers.LonLat(5,40),
                                         new OpenLayers.Size(200,200),
                                         "example popup");
        
            map.addPopup(popup);
        }        

        function addAnchor() {
            popup = new OpenLayers.Popup.Anchored("chicken", 
                                         new OpenLayers.LonLat(5,40),
                                         new OpenLayers.Size(200,200),
                                         "example popup");
        
            map.addPopup(popup);
        }        
        
        function addMarker() {
    
            markers = new OpenLayers.Layer.Markers("zibo");
            map.addLayer(markers);

            feature = new OpenLayers.Feature(layer, 
                                                 new OpenLayers.LonLat(0,0));


            marker = feature.createMarker();
            
            markers.addMarker(marker);
            marker.events.register("mousedown", marker, mousedown);
                                                             
        }
        
        function mousedown(evt) {
            if (popup == null) {
                popup = feature.createPopup();
                popup.setBackgroundColor("yellow");
                popup.setOpacity(0.7);
                popup.events.register("mousedown", popup, onPopupMouseDown);
                markers.map.addPopup(popup);
            } else {
                markers.map.removePopup(popup);
                popup.destroy();
                popup = null;
            }
            Event.stop(evt);
        }        

        /**
         * @param {Event} evt
         */
        function onPopupMouseDown(evt) {
            markers.map.removePopup(popup);
            popup.destroy();
            popup = null;
            Event.stop(evt);
        }


        function destroy() {
            popup.destroy();
        }

        function remove() {
            markers.removeMarker(marker);
        }

        function removelayer() {
            layer.destroy();
//            map.removeLayer(markers);
        }


        // -->
    </script>
  </head>
  <body onload="init()">
    <div id="map"></div>
    <div style="background-color:purple" onclick="add()"> click to add Popup to map</div>
    <div style="background-color:green" onclick="addMarker()"> click to add a Marker with an AnchoredBubble popup</div>
    <div style="background-color:blue" onclick="changer()"> click to modify popup's attributes</div>
    <div style="background-color:red" onclick="remove()"> click to remove the popup from map</div>
    <div style="background-color:grey" onclick="removelayer()"> click to remove the markers layer</div>
    <div style="background-color:orange" onclick="alert(marker.onScreen())"> marker.onscreen()?</div>
    <div style="background-color:yellow" onclick="destroy()"> click to destroy the popup from map</div>
  </body>
</html>
